<template>
    <view class="video_item" v-for="(item, index) in videList" :key="item._id">
        <!-- 视频区域 -->
        <view class="video_area">
            <view class="video_title">{{ item.video_title }}</view>
            <video :title="item.video_title" object-fit="cover" :controls="item.controls" :id="item._id"
                :src="item.video_url" :show-center-play-btn="false">
            </video>
            <view class="pic" @click="playVideo(index, item._id)" v-if="item.play_but">
                <image src="/static/other/video-bofang.png" mode="" />
            </view>
        </view>
        <!-- 医生头像简介 -->
        <view class="doctor_info">
            <image :src="item.avatar" mode="" />
            <text>{{ item.name }}</text>
        </view>
    </view>
    <view class="loading" v-if="isLoading">
        <!-- <image src="" mode="" /> -->
        <text>正在加载中...</text>
    </view>
</template>

<script setup lang="ts">
import { onReachBottom } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import { getVideoListApi } from '@/http/api'
import type { videoItem } from '@/dataType/data'


onMounted(() => {
    getVideoList()
})


const isLoading = ref(false);
const page = ref(0)
//存放视频列表数组
const videList = ref<videoItem[]>([])

//获取视频列表
const getVideoList = async () => {
    //调视频接口
    const res = await getVideoListApi(page.value)
    console.log('视频列表：', res)
    videList.value = [...videList.value, ...res.data.data]
}

//上拉触底
onReachBottom(async () => {
    isLoading.value = true;
    page.value++
    await getVideoList()
    isLoading.value = false;
})

const video_index = ref(-1);
const video_id = ref('');
//点击播放按钮
const playVideo = (i: number, videoId: string) => {
    //按钮显示隐藏
    videList.value[i].play_but = false;
    //播放控制条
    videList.value[i].controls = true;
    //播放逻辑
    startPlay(i, videoId)

}

const startPlay = (i: number, videoId: string) => {
    //第一次
    if (video_id.value === '') {
        video_index.value = i;
        video_id.value = videoId;
        //进行播放
        uni.createVideoContext(videoId).play()

    } else {
        console.log(videoId)
        console.log(video_id.value)
        //如果不是第一次,拿到前一个已经播放的视频对象
        const prevVideo = uni.createVideoContext(video_id.value);
        if (videoId !== video_id.value) {

            //暂停上一个视频
            prevVideo.pause()
            //上一个视频按钮显示，当前点击视频的按钮隐藏
            videList.value[video_index.value].play_but = true;
            videList.value[video_index.value].controls = false;


            //当前的视频播放
            setTimeout(() => {
                video_id.value = videoId;
                video_index.value = i;
                // videList.value[i].play_but = false;
                // videList.value[i].controls = true;
                uni.createVideoContext(videoId).play()
            }, 700)

        }


    }


}
</script>

<style lang="scss">
.video_item {
    height: 500rpx;
}

.video_area {
    position: relative;
    height: 400rpx;

    video {
        width: 100%;
        height: 400rpx;
    }

    .video_title {
        position: absolute;
        z-index: 999;
        color: #fff;
        left: 20px;
        top: 10px;
    }

    .pic {
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        transform: translateX(-50%) translateY(-50%);

        image {
            width: 80rpx;
            height: 80rpx;
        }


    }

}

.doctor_info {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;

    image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
    }

    text {
        margin-left: 20rpx;
    }
}
</style>